<template>
  <div class="home-container" align="center">
    <el-container>
      <el-main>
        <el-card shadow="never" class="cardInfo">
          <div slot="header" class="clearfix" align="center">
            <div class="pos-machine-setting-list">
              <div class="pos-machine-setting-item">
                <ul class="infos mb10">
                  <li>
                    <P class="a-row" style="vertical-align: top;margin-top: 50px;"><span><b>企业微信授权说明：</b></span></P>
                  </li>
                  <li>
                    <ul class="infos mb9">
                      <li>
                        <P class="a-row"><span>企业微信免费提供专业的协作、管理和客户运营工具，实现对内协同高效，当我们需要结合企业微信和业务系统的时候， </span></P>
                        <P class="a-row"><span>我们需要建立一个企业微信第三方应用和一个自建应用</span></P>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <ul class="infos mb8">
                      <li>
                        <P class="a-row"><span>1）安装第三方应用： </span></P>
                        <P class="a-row" style="margin-left: 10px;"><span><b>目的： </b>在企业微信上安装本平台提供的第三方应用，实现发送消息/接收消息/自动回复。</span></P>
                        <P class="a-row"><span>2）安装自建应用：</span></P>
                        <P class="a-row" style="margin-left: 10px;"><span><b>目的： </b>在企业微信上安装本平台提供的第三方应用，实现企业通讯录、员工的管理。</span></P>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="wechatApplet" align="center">
            <div class="wechatApplet-detail" align="center">
              <div class="wechatApplet-detail-item" align="center">
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <h3 class="intro-title text-elepsis ng-binding">企微助手=>三方应用</h3>
                  </el-col>
                </el-row>
                <el-row :gutter="40" align="middle">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div class="item-img">
                      <img src="../../assets/common/wxcom_3rd_app_icon.png" alt="">
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div style="display: inline-block;background: #f4f4f4;border: 0px solid #dddce2;width:90%;align-items: left; height:60px; font-size: 11px;vertical-align: middle;">
                      <div style="display:inline-flex;justify-content: flex-start;align-items: left;padding:5px;float: left;width: 100%;margin-top: 2px;">
                        <span style="font-weight: 800px;">授权企业：</span><span>{{ tpParams.name }}</span>
                      </div>
                      <div style="display:inline-flex;justify-content: flex-start;align-items: left;padding:5px;float: left;width: 100%;">
                        <span style="font-weight: 800px;">AppId：</span><span>{{ tpParams.appId }}</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="wechatApplet-detail-item" align="center">
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <h3 class="intro-title text-elepsis ng-binding">企微助手=>自建应用</h3>
                  </el-col>
                </el-row>
                <el-row :gutter="40" align="middle">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div class="item-img">
                      <img src="../../assets/common/wxcom_self_app_icon.png" alt="">
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div style="display: inline-block;background: #f4f4f4;border: 0px solid #dddce2;width:90%;align-items: left; height:60px; font-size: 11px;vertical-align: middle;">
                      <div style="display:inline-flex;justify-content: flex-start;align-items: left;padding:5px;float: left;width: 100%;margin-top: 2px;">
                        <span style="font-weight: 800px;">授权企业：</span><span>{{ dkParams.name }}</span>
                      </div>
                      <div style="display:inline-flex;justify-content: flex-start;align-items: left;padding:5px;float: left;width: 100%;">
                        <span style="font-weight: 800px;">AppId：</span><span>{{ dkParams.appId }}</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="wechatApplet-detail-item" align="center">
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <h3 class="intro-title text-elepsis ng-binding">企微助手=>通讯录授权</h3>
                  </el-col>
                </el-row>
                <el-row :gutter="40" align="middle">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div class="item-img">
                      <img src="../../assets/common/wxcom_self_app_icon.png" alt="">
                    </div>
                  </el-col>
                </el-row>
                <el-row v-if="!contactParams.hasOpenAuth" :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <el-button type="primary" size="middle" style="min-width: 250px;" @click="installWxCpContact()">通讯录授权</el-button>
                  </el-col>
                </el-row>
                <el-row v-if="contactParams.hasOpenAuth" :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div style="display: inline-block;background: #f4f4f4;border: 0px solid #dddce2;width:90%;align-items: left; height:60px; font-size: 11px;vertical-align: middle;">
                      <div style="display:inline-flex;justify-content: flex-start;align-items: left;padding:5px;float: left;width: 100%;margin-top: 2px;">
                        <span style="font-weight: 800px;">授权企业：</span><span>{{ contactParams.name }}</span>
                      </div>
                      <div style="display:inline-flex;justify-content: flex-start;align-items: left;padding:5px;float: left;width: 100%;">
                        <span style="font-weight: 800px;">AppId：</span><span>{{ contactParams.appId }}</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getWxCpContactAuthorizeUrl, queryWxCpTpOpenAuthInfo, queryWxCpDkOpenAuthInfo, getWxCpContactPermanentAuthInfo } from '@/api/wxCp'
export default {
  data() {
    return {
      publishStatus: false,
      tpParams: {
        name: '',
        appId: '',
        hasOpenAuth: false
      },
      dkParams: {
        name: '',
        appId: '',
        hasOpenAuth: false
      },
      contactParams: {
        name: '',
        appId: '',
        hasOpenAuth: false
      }
    }
  },
  created() {
    this.getWxCpTpAuthInfo()
    this.getWxCpDkAuthInfo()
    var UrlParamsMap = this.urlParams()
    if (UrlParamsMap.auth_code !== undefined || UrlParamsMap.auth_code !== null || UrlParamsMap.auth_code !== '') {
      this.paramsData.appId = UrlParamsMap.appId
      this.paramsData.tenantId = UrlParamsMap.tenantId
      this.paramsData.openAppId = UrlParamsMap.openAppId
      this.paramsData.componentAppId = UrlParamsMap.suiteId
      this.paramsData.type = UrlParamsMap.type
      this.paramsData.authCode = UrlParamsMap.auth_code
      this.paramsData.expiresIn = UrlParamsMap.expires_in
      this.paramsData.state = UrlParamsMap.state
      this.getPermanentAuthInfo()
    }
  },
  methods: {
    getWxCpTpAuthInfo() {
      queryWxCpTpOpenAuthInfo().then(res => {
        this.tpParams.appId = res.appId
        this.tpParams.name = res.corpName
        this.tpParams.hasOpenAuth = res.hasOpenAuth
      })
    },
    getWxCpDkAuthInfo() {
      queryWxCpDkOpenAuthInfo().then(res => {
        this.dkParams.appId = res.appId
        this.dkParams.name = res.corpName
        this.dkParams.hasOpenAuth = res.hasOpenAuth
      })
    },
    installWxCpContact() {
      getWxCpContactAuthorizeUrl().then(res => {
        window.location.href = res.url
      })
    },
    getPermanentAuthInfo() {
      getWxCpContactPermanentAuthInfo(this.paramsData).then(res => {
        if (res) {
          this.tpParams = res
        }
      })
    },
    urlParams() {
      var url = window.location.href
      var obj = {}
      var reg = /[?&][^?&]+=[^?&]+/g
      var arr = url.match(reg)
      if (arr === null) return obj
      arr.forEach(function(item) {
        var tempArr = item.substring(1).split('=')
        var key = decodeURIComponent(tempArr[0])
        var val = decodeURIComponent(tempArr[1])
        obj[key] = val
      })
      return obj
    }
  }
}
</script>
<style lang="scss" scoped>
.home-container {

  background: #fff;
  padding: 10px;
  // height: 650px;
  height: 100%;
  border-radius: 3px;
  .columnInfo-value-remark{
    cursor: pointer;
  }
  .clearfix{
    padding:10px;
    padding-top: 0;
    height: 180px;
    display: flex;
    align-items: center;
    vertical-align: top;
    >div {
      border: 0px solid #e6ebf5;
      vertical-align: top;
      flex-grow: 1;
      width:0;
      margin-right: 20px;
    }
  }
  .cardInfo {
    margin-top: 5px;
    .pos-machine-setting-list {
       display: flex;
       align-items: left;
       vertical-align: top;
       width: calc(100%);
       overflow: hidden;
       height: 300px;
       margin-bottom: 1px;
       margin-top: 1px;
       .pos-machine-setting-item {
         font-size: 16px;
         line-height: 20px;
         color: #3a3a3e;
         margin: 5px 1px 0;
         text-align: left;
         vertical-align: top;
         word-break: break-all;
         .infos {
           display:inline-block;
           vertical-align: top;
           text-align: left;
           line-height: 20px;
           margin-left: 20px;
           margin-top: 5px;
           justify-content: space-between;
           li {
             width: 100%;
             text-align: left;
             font-weight: 400;
             p {
               margin: 0;
               font-size: 14px;
               line-height: 25px;
               span {
                 display: inline-block;
                 width: 30%;
               }
             }
           }
         }
       }
       > div {
         margin-right: 5px;
         vertical-align: top;
         background: #ffffff;
         display: flex;
         flex-direction: column;
         padding: 5px 0 5px;
         width: 100%;
         justify-content: left;
         align-items: left;
         height: 100px;
         .item-name {
           font-size: 18px;
           margin-bottom: 3px;
         }
         .example {
           font-size: 12px;
           margin-bottom: 3px;
         }
         .desc {
           font-size: 12px;
           margin-bottom: 4px;
         }
       }
     }
    .wechatApplet {
      padding:20px;
      padding-top: 0;
      display: flex;
      align-items: left;
      vertical-align: top;
      float:left;
      width:100%;
      >div {
        flex-grow: 1;
        width:1050px;
        margin-right: 20px;
      }
      >div:last-child {
        width:1050px;
        margin-right: 0;
      }
    }
    .linkStr {
      color: #9FC4F0;
      cursor: pointer;
    }
    .wechatApplet-detail {
      padding: 20px;
      display: inline-flex;
      align-items:left;
      width:450px;
      >div {
        border: 1px solid #e6ebf5;
        flex-grow: 1;
        width:450px;
        margin-right: 20px;
        align-items:center;
      }
      >div:last-child {
        margin-right: 0;
        width:450px;
        align-items:center;
      }
    }

    .wechatApplet-detail-item {
      margin-bottom: 10px;
      padding-right: 10px;
      padding-left: 10px;
      padding-bottom: 20px;
      display: inline-block;
      width:150px;
      .item-img{
        border-radius: 4px;
        overflow: hidden;
        min-width: inherit;
        align-items:center;
        img {
          width: 100px;
          height: 100px;
        }
      }
  .list-item {
      position: relative;
      border: 0px solid #dddce2;
      border-radius: 4px;
      padding: 10px;
      display: inline-block;
      height: auto;
      width: 100%;
      .item-img{
        border-radius: 4px;
        overflow: hidden;
        min-width: inherit;
        align-self: center;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .item-intro{
        padding-left: 10px;
        letter-spacing: 0.5px;
        .intro-title {
          font-size: 16px;
          line-height: 24px;
          color: #595961;
          margin: -4px 0 0;
          font-weight: 700;
          letter-spacing: 1px;
        }
        .text-elepsis {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .intro-detail {
          font-size: 12px;
          line-height: 20px;
          color: #9797A1;
          font-weight: 500;
          margin: 0;
        }
      }
      .fl{
        float: left;
      }
     }
    }
   }
   .wechatApplet-containerInfo{
     border: 1px solid #dddce2;
     margin-bottom: 10px;
     overflow: auto;
     width: 100%;
   }
   .headerInfo {
       display: flex;
       background-color: #F8F8F8;
       color: #333;
       text-align: left;
       display: flex;
       justify-content: space-between;
       margin: -4px 0 0;
       padding: 10px;
     }
     .columnInfo-label{
       padding:10px;
       margin: 0;
       text-align: left;
       border-bottom: 0px solid #dddce2;
     }
     .columnInfo-value{
       padding:0px;
       margin: 0;
       text-align: left;
       border-bottom: 1px solid #dddce2;
     }
     .columnInfo-value-intro{
       padding-left: 10px;
       letter-spacing: 0.5px;
       .columnInfo-value-title {
         font-size: 14px;
         line-height: 24px;
         color: #595961;
         margin: -4px 0 0;
         font-weight: 700;
         letter-spacing: 1px;
       }
       .columnInfo-value-text-elepsis {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
       }
       .columnInfo-value-remark {
         font-size: 12px;
         line-height: 20px;
         color: #9797A1;
         font-weight: 500;
         margin: 0;
         text-overflow:ellipsis;
         white-space:nowrap;
         overflow:hidden;
       }
     }
}
</style>
